<template>
    <view class="my-deposit">
        <view class="top-header"/>
        <view class="deposit-detail">
            <view class="title">押金总额(元)</view>
            <view class="content">{{money.totalDeposit}}</view>
            <view class="detail-amount">
                <view class="freezing-amount">
                    <view class="title">冻结金额（元）</view>
                    <view class="content">{{money.freezeDeposit}}</view>
                </view>
                <view class="cash-amount">
                    <view class="title">可提现金额（元）</view>
                    <view class="content">{{money.trueDeposit}}</view>
                </view>
                <view class="go-withdraw" @tap.stop="goWithdraw">去提现</view>
            </view>
        </view>
        <view class="tips">
            <view>押金说明：</view>
            <view class="tips-content">
                会员卡次数用完或者到期，所有在途订单结算完成后押金可手动提现
            </view>
        </view>
    </view>
</template>

<script>
    import service from "@/service";
    export default {
        name: "my-deposit",
        data(){
            return{
                money: {}
            }
        },
        onLoad(){
            this.getMoney()
        },
        methods: {
            goWithdraw(){
                uni.navigateTo({
                    url: './withdraw'
                })
            },
            getMoney(){
                uni.showLoading({
                    title: '加载中',
                });
                service.mineService.getMoney({
                    data: {},
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            console.log(res, 'res');
                            this.money = res.result || {}
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .my-deposit{
        .top-header{
            width: 100%;
            height:256rpx;
            background: #2BA8FC;
        }
        .deposit-detail{
            position: relative;
            top: -150rpx;
            width: 690rpx;
            height: 291rpx;
            margin: 0 auto;
            background:#ffffff;
            box-shadow:0 3rpx 14rpx rgba(0,0,0,0.08);
            border-radius: 8rpx;
            padding: 40rpx 20rpx;
            box-sizing: border-box;
            .title{
                font-size: 24rpx;
                color: #cccccc;
            }
            .content{
                font-size: 38rpx;
                margin-top: 20rpx;
            }
            .detail-amount{
                margin-top: 20rpx;
                display: flex;
                .freezing-amount{
                    width: 168rpx;
                }
                .cash-amount{
                    margin-left: 100rpx;
                }
                .go-withdraw{
                    width:126rpx;
                    height:38rpx;
                    text-align: center;
                    color: #2BA8FC;
                    font-size: 24rpx;
                    line-height: 38rpx;
                    border:1px solid rgba(43,168,252,1);
                    border-radius:24rpx;
                    margin-top: 50rpx;
                }
            }
        }
        .tips{
            margin: -100rpx 30rpx auto 30rpx;
            &-content{
                margin-top: 10rpx;
                color: #999999;
            }
        }
    }
</style>